<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>路由组件传参</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/user/a001">to /user/a001</router-link><br />
      <router-link to="/user2/a002">to /user/a002</router-link><br />
      <router-link to="/promotion/from-newsletter">to /promotion/from-newsletter</router-link><br />
      <router-link to="/search?q=vue">to /search?q=vue</router-link><br />
      <router-view :id="$route.params.userId"></router-view>
      <router-view name='sidebar'></router-view>
    </div>

    <script type="text/javascript">
      
      const User = {
        props: ['id'],
        template: '<div>User: {{id}}</div>'
      }
      
      const Sidebar = {
        template: '<div>Sidebar Content: {{$route.params.id}}</div>'
      }
      
      const Promotion = {
        props: ['newsletterPopup'],
        template: '<div>Promotion content: {{newsletterPopup}}</div>'
      }
      
      const SearchUser = {
        props: ['query'],
        template: '<div>search result: {{query}}</div>'
      }
      
      const router = new VueRouter({
        routes: [
          {
            path: '/user/:userId',
            component: User,
            props: true
          },
          // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
          {
            path: '/user2/:id',
            components: {default: User, sidebar: Sidebar},
            // 1 布尔模式
            //   如果 props 被设置为 true，route.params 将会被设置为组件属性。
            props: {default: true, sidebar: false}
          },
          {
            // 2 对象模式
            //   如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
            path: '/promotion/from-newsletter',
            component: Promotion,
            props: {newsletterPopup: false}
          },
          {
            // 3 函数模式
            //   你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
            path: '/search',
            component: SearchUser,
            props: route => ({query: route.query.q})
            //   URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
          }
        ]
      })
      
      new Vue({
        el: '#app1',
        router
      })
    </script>
  </body>
</html>